<template>
    <div id="max">
      <div id="opinion">
        <span id="return" @click="re">返回</span>
        <h3><span id="aa">意见反馈</span></h3>
      </div>
      <div id="tow">反馈类型(必填)</div>
      <!-- <div>请选择反馈类型</div> -->
      <el-button text @click="table = true" show-close="boolean"
        >请选择反馈类型 <span id="arrow"> > </span></el-button
      >
      <div id="concrete">具体描述(必填)</div>
      <el-drawer v-model="table" title="反馈类型" direction="btt " size="50%">
        <el-table :data="gridData">
          <el-table-column property="date" label="" width="100%" />
          <el-table-column property="address" label="" />
        </el-table>
      </el-drawer>
      <div>
        <el-input
          v-model="textarea"
          :rows="4"
          type="textarea"
          placeholder="请具体准确描述您的问题，我们会尽快处理您的举报信息。（字数100字以内）"
        />
      </div>
      <div id="mm">
        <!-- <el-row class="mb-4">
          <el-button type="success" id="xx" size="100%" click="submit1" >提交</el-button>
        </el-row> -->
        <el-button id="xx" text @click="open">提交</el-button>
      </div>
    </div>
  </template>
  
  <script lang="ts" setup>
  import { reactive, ref } from "vue";
  import { ElDrawer, ElMessageBox } from "element-plus";
  import router from "@/router";
  const textarea = ref("");
  
  const open = () => {
    ElMessageBox.alert("感谢您的反馈，我们会尽快处理", "反馈成功", {
      confirmButtonText: "OK",
      callback: (action: Action) => {
        ElMessage({
          type: "info",
          message: `action: ${action}`,
        });
      },
    });
  };
  const formLabelWidth = "80px";
  let timer;
  const table = ref(false);
  const dialog = ref(false);
  const loading = ref(false);
  const form = reactive({
    name: "",
    region: "",
    date1: "",
    date2: "",
    delivery: false,
    type: [],
    resource: "",
    desc: "",
  });
  const gridData = [
    {
      date: "登陆注册",
    },
    {
      date: "工资提现",
    },
    {
      date: "活动相关",
    },
    {
      date: "产品建议",
    },
    {
      date: "其他",
    },
  ];
  const drawerRef = ref<InstanceType<typeof ElDrawer>>();
  const onClick = () => {
    drawerRef.value!.close();
  };
  
  const handleClose = (done) => {
    if (loading.value) {
      return;
    }
    ElMessageBox.confirm("Do you want to submit?")
      .then(() => {
        loading.value = true;
        timer = setTimeout(() => {
          done();
          // 动画关闭需要一定的时间
          setTimeout(() => {
            loading.value = false;
          }, 400);
        }, 2000);
      })
      .catch(() => {
        // catch error
      });
  };
  let re = () => {
    router.push("/user");
  };
  
  const cancelForm = () => {
    loading.value = false;
    dialog.value = false;
    clearTimeout(timer);
  };
  let submit1 = () => {
    console.log("ddds");
    alert("提交成功");
  };
  </script>
  <style lang="scss">
  #max {
    width: 100%;
    height: 660px;
    #opinion {
      width: 100%;
      height: 30px;
      text-align: center;
    }
    #return {
      position: relative;
      left: -140px;
      top: 3px;
    }
    #xx {
      width: 250px;
      height: 50px;
      background-color: #ffcc00;
      position: relative;
      top: 30px;
      left: 50px;
    }
    #aa {
      position: relative;
      top: -23px;
    }
    #inp {
      width: 100%;
      height: 100px;
    }
    #tow {
      background-color: #f7f7f7;
      height: 40px;
      text-indent: 20px;
      line-height: 35px;
    }
    #arrow {
      position: relative;
    //   left: 200%;
    
    }
    #concrete {
      height: 40px;
      background-color: #f7f7f7;
      text-indent: 20px;
      line-height: 35px;
    }
    #mm {
      background-color: #f7f7f7;
      height: 430px;
    }
  }
  </style>
  